<template>
  <div class="page">
    <div>
      <form action="/">
        <van-search
          ref="input"
          v-model="value"
          placeholder="请输入搜索关键词"
          show-action
          @search="onSearch"
          @cancel="onCancel"
        />
      </form>
    </div>
    <div class="search">搜索结果</div>
    <div>
      <list :list="list" :baseUrl="baseUrl"></list>
    </div>
  </div>
</template>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// @ is an alias to /src
import list from "@/views/searchlist.vue";
import { createDecipher } from "crypto";
import { wxShare } from "@/mixin/share";
export default {
  name: "home",
  components: {
    list
  },
  mixins: [wxShare],
  data() {
    return {
      value: "",
      baseUrl: process.env.VUE_APP_BASEURL,
      list: []
    };
  },
  methods: {
    async onSearch() {
      let res = await this.$http(
        `api/index/search`,
        {
          params: {
            search: this.value
          }
        }
      );
      if (res) {
        this.list = res.data;
      }
    },
    onCancel() {
      this.$router.back(-1);
    }
  },
  async mounted() {
    this.$refs.input.focus();
    console.log(this.$refs);
  }
};
</script>
<style scoped>
.page {
  background: #fff;
}
.search {
  padding: 10px;
}
</style>